<template>
  <div style="overflow: auto">
    <z-publicFrame>
      <template #header>
        <el-page-header @back="goBack" content="添加">
        </el-page-header>
      </template>
      <template #container>
        <div style="min-width: 1520px"  class="clearfix">
        <div class="formStyle">
          <div class="treeHead">

            <el-button @click="handleAddOneMenu" type="primary" size="mini" icon="el-icon-edit">增加一级菜单</el-button>

          </div>
          <el-tree
            :data="menus"
            node-key="id"
            default-expand-all
            @node-contextmenu="handleContextmenu"
            @node-click="handleNodeClick"
          >
          </el-tree>
        </div>
        <div class="edit">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item prop="name" label="菜单名字">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item prop="url" label="url">
              <el-input v-model="form.url"></el-input>
            </el-form-item>
            <el-form-item label="是否锁定" prop="available">
              <el-radio-group v-model="form.available">
                <el-radio :label="1">公开</el-radio>
                <el-radio :label="0">锁定</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="父菜单" prop="parentCode">
              <el-select v-model="form.parentCode" placeholder="请选择父节点">
                <el-option :label="'一级菜单'" :value="null"></el-option>
                <el-option :key="item.id" v-for="item in menus" :label="item.label" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细配置">
              <el-input type="textarea" v-model="form.perConfig"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleEdit">立即修改</el-button>
            </el-form-item>
          </el-form>
        </div>
        </div>
      </template>
    </z-publicFrame>

    <el-dialog title="增加菜单" :visible.sync="dialogFormVisible" :modal="false">
      <el-form ref="form1" :model="add" :rules="rules" label-width="80px">
        <el-form-item prop="name" label="菜单名字">
          <el-input v-model="add.name"/>
        </el-form-item>
        <el-form-item prop="url" label="url">
          <el-input v-model="add.url"></el-input>
        </el-form-item>
        <el-form-item label="是否锁定" prop="available">
          <el-radio-group v-model="add.available">
            <el-radio :label="1">公开</el-radio>
            <el-radio :label="0">锁定</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="父菜单" prop="parentCode">
          <el-select :disabled="Boolean(options)" v-model="add.parentCode" placeholder="请选择父节点">
              <el-option :key="item.id" v-for="item in options" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细配置">
          <el-input type="textarea" v-model="add.perConfig"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd(add)">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import PublicFrame from '../../components/CrudTempalte/PublicFrame'

export default {
  name: 'add',
  components: {
    'z-publicFrame': PublicFrame
  },
  props: ['menus'],
  data() {
    return {
      api: {
        update: this.$api.menu.update
      },
      config: {
        key: null,
        value: null
      },
      options: null,
      dialogFormVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        name: '',
        available: 1,
        perConfig: '{}',
        url: null,
        parentCode: null
      },
      add: {
        name: '',
        available: 1,
        perConfig: '{}',
        url: null,
        parentCode: null
      },
      menuCode: null
    }
  },
  computed: {
  },
  methods: {
    handleNodeClick(data) {
      this.form.name = data.label
      this.form.available = data.available
      this.form.perConfig = data.config
      this.form.url = data.url
      this.form.parentCode = data.parentCode
      this.menuCode = data.id
    },
    async handleEdit() {
      this.form.code = this.menuCode
      const data = await this.$http.post(this.api.update, this.$qs.stringify(this.form))
      if (!data) {
        return
      }
      if (data.data.status === 200) {
        this.$success(data.data.message)
        this.$emit('handleUpdateMenus')
      }
    },
    async handleDel(code) {
      const data = await this.$http.post(this.$api.menu.delete, `code=${code}`)

      if (!data) {
        return
      }
      if (data.data.status === 200) {
        this.$success('删除成功')
        this.$emit('handleUpdateMenus')
      }
    },
    handleAdd(data) {
      const _this = this
      this.$http.post(this.$api.menu.add, this.$qs.stringify(data)).then(function(data) {
        if (data.data.status === 200) {
          _this.$success('成功插入菜单')
          _this.$emit('handleUpdateMenus')
        } else {
          _this.$error('插入失败')
        }
        _this.dialogFormVisible = false
      })
    },
    handleAddOneMenu() {
      this.options = []
      this.initAddAttr()
      this.dialogFormVisible = true
    },
    handleContextmenu(event, data, node, combinator) {
      const _data = data
      this.$confirm('请选择操作', '操作', {
        confirmButtonText: '子菜单',
        cancelButtonText: '删除',
        distinguishCancelAndClose: true,
        type: 'info'
      }).then(() => {
        this.initAddAttr()
        this.options = [{ label: _data.label, id: _data.id }]
        this.add.parentCode = _data.id
        this.dialogFormVisible = true
      }).catch((data) => {
        if (data === 'close') {
          return
        }
        this.tipMethod(_data)
      })
    },
    initAddAttr() {
      for (let item in this.add) {
        this.add[item] = null
      }
      this.add.available = 1
    },

    tipMethod(data) {
      const _this = this
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDel(data.id)
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    openAdd() {

    },

    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf('三级 3-2-2') === -1
    },
    goBack() {
      this.$router.go(-1)
    }
  },
  create() {

  }
}
</script>

<style scoped>
  .el-page-header {
    margin: 15px 0;
    overflow: hidden;
  }
  div.formStyle {
    width: 15%;
    float: left;
  }
  .treeHead {
    height: 30px;
    padding: 10px 10px;
  }
  .edit {
    margin-top: 30px;
    overflow: auto;
    height: 500px;
    width: 30%;
    float: left;
  }

</style>
